import React, { Component } from 'react';
import {View, Text, StyleSheet, TextInput, Image, Clipboard, TouchableOpacity} from 'react-native'
import { SafeAreaView } from 'react-navigation';
import { Button,Overlay, Toast } from 'teaset';
import * as ShareMenu from './../common/ShareMenu'

class ShareModel extends Component
{
    constructor(props){
      super(props)
      let quanPirce = this.props.zkPrice - this.props.quan

      this.state = {
        content: '',
        copyContent: '【原价】'+this.props.zkPrice+'元\n'+
          '【券后价】'+ quanPirce.toFixed(2) +'元\n'+
          // '【平台再返】'+this.props.jifen+'元\n'+
          // '-----------------------------\n'+
          '复製这条'+this.props.kouling+'\n'+
          '进入【Tao宝】即可抢购'
      }
    }

  componentDidMount()
  {
    console.log(this.props)
    this.setState({content: this.props.content})
  }

  componentWillReceiveProps(nextProps)
  {
    console.log(nextProps)
  }


  render()
  {
    return(
      <SafeAreaView style={styles.container}>
        <View style={styles.labelContainer}>
          <Text style={{fontSize:14, color:'#fff'}}>奖励收益预估:￥{this.props.jifen}</Text>
        </View>
        <View style={styles.contentContainer}>
          <TextInput style={{minHeight: 50, fontSize:15, lineHeight:20, marginBottom: 5}} multiline = {true} value={this.state.content}
                     onChangeText={(text)=>{this.setState({content: text})}}/>
          <Text style={{fontSize:14, color:'#767676', lineHeight:20}}>
            {this.state.copyContent}
          </Text>
        </View>
        <View style={styles.imageContainer}>
          <Image source={{uri:this.props.pictUrl}} defaultSource={require('./../../../assets/images/defaultImg.jpg')} style={{flex:1, borderColor:'#999', borderWidth:0.4, marginBottom:20}} resizeMode='stretch'/>

          <View style={styles.buttonContainer}>
            <Button style={{borderColor: '#FF7C29',  flex:1, marginRight: 5}} titleStyle={{color:'#FF7C29',}} title='复制分享文案' onPress={() => {
              let copyString = this.state.content +'\n'+ this.state.copyContent
              Clipboard.setString(copyString);
              Toast.success('已经为你复制淘宝口令')
            }} />

            {global.isWXAppInstalled ? <Button style={{borderColor: '#e12f32',  flex:1}} titleStyle={{color:'#e12f32',}} title='分享图片' onPress={() => {
              let copyString = this.state.content +'\n'+ this.state.copyContent
              Clipboard.setString(copyString);
              Overlay.show(ShareMenu.ShareMenu({
                'thumbImage': this.props.pictUrl,
                'type':'image',
                'content': this.state.content
              }))
            }} /> : null}


          </View>
        </View>

      </SafeAreaView>
    )
  }
}


const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor:'#F5F5F5'
  },
  labelContainer:{
    // flex:1,
    height:40,
    backgroundColor: '#e12f32',
    paddingHorizontal:15,
    paddingVertical: 10,
    alignItems:'center',
    flexDirection:'row'
  },
  contentContainer:{
    minHeight: 150,
    backgroundColor:'#fff',
    paddingHorizontal:15,
    paddingVertical: 10,
    borderBottomColor:'#999',
    borderBottomWidth: 0.4,
    marginBottom: 10
  },
  imageContainer:{
    flex: 1,
    backgroundColor:'#fff',
    paddingHorizontal:10,
    paddingVertical: 10,
    borderBottomColor:'#999',
    borderBottomWidth: 0.4,
  },
  buttonContainer:{
    height:40,
    flexDirection: 'row',
  }
})
export const LayoutComponent = ShareModel

export function mapStateToProps(state, props) {
  return {
    routes: state.routes,
  }
}
